<template id="car-number-select">
    <v-col cols="12" sm="12" md="8">
        <v-row>
            <v-col>
                <span class="jh-input-label">车辆编号</span>
                <v-text-field class="jh-v-input" dense single-line filled v-model="carItem.carId" label="自动填写" readonly></v-text-field>
            </v-col>
            <v-col>
                <span class="jh-input-label"><span class="red--text">*</span>车牌号</span>
                <v-autocomplete class="jh-v-input" dense single-line filled v-model="carItem.carNumber" :rules="validationRules.requireRules" :items="carBasic" item-text="carNumber" item-value="carNumber" @change="doUiAction('changeCarNumber', $event)"></v-autocomplete>
            </v-col>
        </v-row>
    </v-col>

</template>

<script type="module">
    Vue.component("car-number-select", {
        template: '#car-number-select',
        mounted() {
            this.doUiAction('getCarBasic')
        },
        data: () => ({
            carBasic: [],
            carItem: {},
            validationRules: {
				requireRules: [v => !!v || "必填"],
			},
        }),
        methods: {
            async doUiAction(uiActionId, uiActionData) {
                switch (uiActionId) {
                    case 'getCarBasic':
                        await this.getCarBasic();
                        break;
                    case 'changeCarNumber':
                        await this.changeCarNumber(uiActionData);
                        break;
                }
            },
            async getCarBasic() {
                const rows = (await window.jianghuAxios({
                    data: {
                        appData: {
                            pageId: 'basicManagement',
                            actionId: 'selectItemList',
                            where: { operationStatus: "可用" },
                            orderBy: [{ column: 'operationAt', order: 'desc' }]
                        }
                    }
                })).data.appData.resultData.rows;
                this.carBasic = rows
            },
            async changeCarNumber(carNumber) {
                const { carId } = this.carBasic.find(item => item.carNumber === carNumber)
                this.carItem.carId = carId
                // 更新父组件的carId和carNumber
                this.$emit('success', this.carItem)
            },
        }
    })
</script>